Objectifs :

Nous avons regroupé les données dans une seule liste. Notre objectif est à présent de lire un catalogue sur le Web, pour renseigner cette liste, donc chaque élément comprend le titre, l'image et le son, à la manière d'un catalogue.

Pour ça, nous allons utiliser le format JSON (JavaScript Object Notation). C'est le format le plus utilisé (avec XML) pour échanger des données structurées et lisibles par l'homme. Il permet de décrire les listes [...] et les dictionnaires {...} que nous venons de voir. Il prend la forme illustrée ci-dessous dans la colonne de gauche.

[ { "title" : "Coluche", "image" : "Coluche.jpg", "audio" : "Coluche.mp3" },{ "title" : "Abbé Pierre", "image" : "abbePierre.jpg", "audio" : "appelAbbePierre.mp3" },{ "title" : "Martin Luther King", "image" : "King.jpg", "audio" : "King.mp3" },{ "title" : "Malcolm X", "image" : "MalcolmX.jpg", "audio" : "MalcolmX.mp3" } ]

Point de départ:

Pour cette leçon, vous pouvez repartir de la version précédente de l'application ou importer cette version Prenez soin d'enregistrer votre version de travail avec un nouveau nom, par exemple : playlistV6.

Réalisation :

On verra le détail du format JSON dans la leçon suivante. Pour l'instant l'objectif est de lire et décoder le contenu d'un catalogue déjà prêt, et récupérer son contenu pour le convertir en liste dans la variable tracks.

On va le faire en 2 étapes :

1. lire le texte contenu dans le fichier catalogue,
2. puis décoder ce texte au format JSON pour le convertir en liste et dictionnaires App Inventor.

Lire un fichier texte sur le Web

Dans notre exemple, on met le nom du fichier catalogue tracks.json dans la variable JSONCatalog. Le fichier catalogue est sur le Web au même endroit que les images et les sons, à l'URL définie dans la variable dataDirectoryURL.
Pour lire ce fichier, on va utiliser un composant Web qui se trouve dans la catégorie connectivité dans la partie Design.

• Ajoutez un composant Web depuis le design : c'est un composant invisible.
• Ajoutez également un composant Notificateur dans la catégorie Interface utilisateur. Il nous permettra d'afficher des alertes en cas d'erreur.

Ensuite, vous allez

1. commencer par mettre de côté les blocs qui sont dans l'évènement Screen1.Initialise.
   On réutilisera ces blocs - sans modification - après avoir lu le catalogue,
2. préciser au composant Web que vous voulez récupérer le contenu des fichiers (plutôt que les enregistrer)en fixant la propriété enregistrer réponse à faux,
3. renseigner la propriété Web.URL avec l'URL du catalogue : c'est la jointure des variables dataDirectoryURL et de JSONCatalog,
4. puis appeler la procédure Web.obtenir pour lire le ficher catalogue.

La demande de lecture de données sur le Web peut prendre du temps et le retour n'est jamais certain, donc on n'attend pas la réponse (c'est une procédure dite "asynchrone"). L'arrivée du fichier demandé va déclencher l'évènement quand Web1.Texte reçu que l'on ajoute aux blocs.

Avant d'aller plus loin, on va vérifier si ça a bien marché en affichant le code et le contenu de la réponse avec un message d'alerte.

Testez : si tout s'est bien passé, vous devez avoir :

• code reponse : 200
• suivi de l'affichage du ficher texte à l'URL demandé

Décodage du texte au format JSON

(Avant de décoder, on va vérifier que le code réponse qui doit être égal à 200)

Nous allons utiliser la procédure JsonTextDecodeWithDictionaries pour décoder un texte au format JSON et le convertir en liste et dictionnaires. Cette procédure est dans le composant Web. Le résultat du décodage est assigén à la variable tracks

Si tout s'est bien passé, nous avons maintenant reconstitué la liste de dictionnaires dans la variable tracks. On peut donc :

• remplacer l'initialisation des données de tracks par une liste vide,

• remettre dans le script de l'évènement quand Web1.Texte reçu les blocs que nous avions mis de côté dans le script de l'évènement quand Screen1.Initialise,

Conclusion : Blocs modifiés pour la lecture du Web catalogue

Au final, les blocs modifiés pour lire le catalogue sur le Web, sont ceux de la parte supérieure, dont la version finale est affichéeci-dessous :

Dans cette version de l'application, le catalogue enregistré sur le Web sera lu par tous les utilisateurs de votre application à chaque démarage. Vous pourrez donc partager avec eux de nouveaux contenus sans avoir à modifier l'application : La partie algorithmie est maintenant indépendante de la partie données.

Nous allons voir maintenant comment modifier le cataloge en respectant les règles JSON qui permettent à l'application de le décoder.